<template>
  <div id="time-line">
    <span class="arrow pre-arrow" @click="changeHour('pre')" title="上一小时"></span>
    <div class="time-box">
      <span class="sun sunrise"></span>
      <span class="sun sunset"></span>
      <div class="time-line"></div>
      <div class="time-tick">
        <template v-for="(tick,index) in hourList">
          <span class="tick" @click="clickToHour(index)"><span :class="{active:history_hour === tick}">{{tick}}</span></span>
        </template>
      </div>
      <span id="time-tip" class="time-tip" v-dragged="onDragged" ref="time-tip"></span>
    </div>
    <span class="arrow next-arrow" @click="changeHour('next')" title="下一小时"></span>
  </div>
</template>

<script>
  import {mapGetters, mapMutations} from 'vuex'
  import eventBus from '../../../util/event-bus'
  export default {
    name: 'TimeLine',
    data () {
      return {
        hourList: [6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24],
        dragging: false,
        unit: 16,   //288/18
        curIndex: 0,
        minLeft: -5,   //tick的最小left值
        maxLeft: 280,  //tick的最大left值
        tipLeft: 0,    //当前tip所在
      }
    },
    mounted(){
      this.$nextTick(() => {
        this.curIndex = this.history_hour - 6;
        this.$refs['time-tip'].style.left = (this.curIndex * this.unit - 5) + 'px';
      })
    },
    computed: {
      ...mapGetters(['history_hour']),
      curHour: () => {
        return this.curIndex + 6;
      }
    },
    methods: {
      ...mapMutations(['updateHistoryHour']),
      changeHour(type){
        if (type === 'pre') {
          this.curIndex = this.curIndex > 0 ? this.curIndex - 1 : 0;
        } else {
          this.curIndex = this.curIndex < 18 ? this.curIndex + 1 : 18;
        }
        this.updateHistoryHour(this.hourList[this.curIndex]);
        let len = this.curIndex * this.unit - 5;
        this.$refs['time-tip'].style.left = len < this.minLeft?this.minLeft: len+ 'px';
      },
      clickToHour(index){
        this.curIndex= index;
        this.updateHistoryHour(this.hourList[this.curIndex]);
        let len = this.curIndex * this.unit - 5;
        this.$refs['time-tip'].style.left = len < this.minLeft?this.minLeft: len+ 'px';
      },
      onDragged({el, deltaX, deltaY, offsetX, offsetY, clientX, clientY, first, last}) {
//        console.log(el, deltaX, deltaY, offsetX, offsetY, clientX, clientY, first, last);
//        console.log(el);
//        console.log(window.event.button);
        let minUnit = this.unit / 2;
        if (el.id !== 'time-tip') return;

        if (first) {  // 开始拖拽
          eventBus.$emit("DragStart");
          this.dragging = true;
          return;
        }
        if (last) {  // 停止拖拽
          eventBus.$emit("DragStop");     // 拖拽停止,发送当前小时

//          //加个timeout;解决滚动条回跳的bug
          setTimeout(() => {
            this.dragging = false;
            this.updateHistoryHour(this.hourList[this.curIndex]);
            let len = this.curIndex * this.unit - 5;
            el.style.left = len < this.minLeft?this.minLeft: len+ 'px';
          }, 100);
          return;
        }
        let l = +window.getComputedStyle(el)['left'].slice(0, -2) || 0;

        this.tipLeft = l + deltaX;
        if (this.tipLeft > this.maxLeft) {
          this.tipLeft = this.maxLeft;
        }
        if (this.tipLeft < this.minLeft) {
          this.tipLeft = this.minLeft;
        }
        let temp = Math.floor((this.tipLeft + 5 - 1) / minUnit);

        this.curIndex = Math.floor(temp / 2) + temp % 2;
        el.style.left = this.tipLeft < this.minLeft?this.minLeft: this.tipLeft + 'px';
      },

    }
  }
</script>

<style scoped lang="scss">
  @import "../../../common/common.scss";

  #time-line {
    display: inline-block;
    vertical-align: middle;
    width: 320px;
    height: 26px;
    .arrow {
      vertical-align: middle;
      display: inline-block;
      width: 10px;
      height: 10px;
      cursor: pointer;
      &.pre-arrow {
        background: url("../../../../static/images/road/arrow-pre-icon.png") no-repeat center;
      }
      &.next-arrow {
        background: url("../../../../static/images/road/arrow-next-icon.png") no-repeat center;
      }
    }
    .time-box {
      vertical-align: middle;
      display: inline-block;
      width: 288px;
      height: 10px;
      border-left: 1px solid #fff;
      border-right: 1px solid #fff;
      position: relative;

      .sun {
        position: absolute;
        top: 0px;
        width: 36px;
        height: 10px;
        background: url("../../../../static/images/road/hot-icon.png") no-repeat center;
        &.sunrise {
          left: 13px;
        }
        &.sunset {
          left: 174px;
        }
      }
      .time-line {
        width: calc(100% - 2px);
        height: 0px;
        border: 1px solid #fff;
        margin-top: 4px;
      }
      .time-tick {
        width: 100%;
        height: 16px;
        position: absolute;
        top: 5px;
        left: 0;
        /*background: #35495a;*/
        white-space: nowrap;
        .tick {
          display: inline-block;
          vertical-align: middle;
          width: 16px;
          text-align: center;
          position: relative;
          left: -8px;
          cursor: pointer;
          span {
            display: block;
            font-size: 14px;
            transform: scale(0.6);
            opacity: 0.6;
            &.active {
              color: $font-highlight;
              transform: scale(0.8);
            }
          }
        }
      }
      .time-tip {
        position: absolute;
        top: -2px;
        left: -5px;
        width: 10px;
        height: 20px;
        background: url("../../../../static/images/road/cur-icon.png") no-repeat center;
        cursor: col-resize;
        /*transition: left ease-in-out .5s;*/
      }
    }
  }
</style>
